<template>
    <div class="w-full" ref="refDiv">
        <el-popover v-model:visible="visible"
                    :width="width"
                    trigger="click"
                    placement="bottom-end">
            <template #reference>
                <el-input ref="buttonRef"
                          placeholder="选择图标"
                          readonly
                          :value="inputValue"
                          :prefix-icon="inputValue"
                          :suffix-icon="visible ? 'ArrowUp' : 'ArrowDown'" />
            </template>

            <el-scrollbar height="200px">
                <div class="flex flex-wrap scroll-auto">
                    <template v-for="i in Icons" :key="i">
                        <div class="flex-center w-30px h-30px rounded-1 cursor-pointer hover:bg-#f1f1f1"
                             @click="changeIcon(i)">
                            <Icon :name="i" size="18" />
                        </div>
                    </template>
                </div>
            </el-scrollbar>
        </el-popover>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from 'vue';
import Icon from "../Icon.vue"
import * as ElIcons from '@element-plus/icons-vue'

const Icons = Object.keys(ElIcons)

const refDiv = ref()

const visible = ref(false)
const props = defineProps<{
    modelValue: string
}>()

const inputValue = ref(props.modelValue)

const emits = defineEmits<{
    (e: "change", v: string): void
    (e: "update:modelValue", v: string): void
}>()

function changeIcon(name: string) {
    inputValue.value = name
    visible.value = false
    emits("update:modelValue", name);
}

// 弹窗宽度
const width = ref()
onMounted(() => {
    nextTick(() => {
        width.value = refDiv.value.clientWidth
    })
})

watch(() => props.modelValue, (value) => {
    inputValue.value = value
})
</script>